<template>
  <div id="center">
    <div class="up">
      <div class="bg-color-black item" v-for="item in titleItem" :key="item.title">
        <p class="ml-3 colorBlue fw-b text-center" :title="item.title">{{item.title}}</p>
        <div>
          <dv-digital-flop 
            :config="item.number" 
            style="width:100%;height:.625rem;display:inline-block;margin-top:0.2rem;" 
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import centerChart from '@/cuscomponents/echart/center/centerChartRate'
import { createNamespacedHelpers } from 'vuex'
const { mapState } = createNamespacedHelpers('screen')

export default {
  data () {
    return {
      titleItem: [
        {
          title: this.$t('6qN1dG1-cOKyykjuaFrqx') + '(kg)',
          number: {
            number: [0],
            toFixed: 2,
            content: '{nt} '

          }
        },
        {
          title: this.$t('C9LrLhPwUX3vHa_mfwMne') + '(kW)',
          number: {
            number: [0],
            toFixed: 2,
            content: '{nt} '

          }
        },
        {
          title: this.$t('jhOHkzJphJwwP6j_SH81R') + '(kWh)' ,
          number: {
            number: [0],
            toFixed: 2,
            content: '{nt} '

          }
        },
        {
          title: this.$t('3Cb1nqhcSvdxWXAPCDs-j'),
          number: {
            number: [0],
            toFixed: 0,
            content: '{nt} '

          }
        },
        {
          title: this.$t('Dfir0ZpvgUzJza6LIjN3x'),
          number: {
            number: [0],
            toFixed: 0,
            content: '{nt} '
          }
        }
      ]
    }
  },
  computed: {
    ...mapState(['adminScreenData'])
  },
  mounted () {
    this.makeData()
  },
  watch: {
    'adminScreenData.detail': {
      handler: function () {
        this.makeData()
      },
      deep: true
    }
  },
  methods: {
    makeData () {
      this.titleItem = this.titleItem.map((item, index) => {
        const it = _.cloneDeep(item)
        if (index == 0) {
          it.number.number = [this.adminScreenData.detail.co2]
        } else if (index == 1) {
          it.number.number = [this.adminScreenData.detail.capacity]
        } else if (index == 2) {
          it.number.number = [this.adminScreenData.detail.electric]
        } else if (index == 3) {
          it.number.number = [this.adminScreenData.detail.chargingcount]
        } else if (index == 4) {
          it.number.number = [this.adminScreenData.detail.connectorcount]
        }
        // it.number.number = [123456789]
        const num = it.number.number[0]
        it.number.style = this.transformStyle({ num })
        return it
      })
    },
    transformStyle ({ num }) {
      const style = {
        fontSize: 30
      }
      if (num) {
        const n = 32
        const length = String(num).length
        _.assign(style, { fontSize: _.max([n - 1.5 * length, 10]) })
      }
      return style
    }
  },
  components: {
    centerChart
    // centerChart1,
    // centerChart2
  }
}
</script>

<style lang="scss" scoped>
#center {
  display: flex;
  flex-direction: column;
  .up {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 0.1rem;
    .item {
      border-radius: 0.0625rem;
      padding: 0.05rem;
      margin: 0.05rem;
      width: 19%;
      height: 1.22rem;
      p {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }
    }
  }
}
</style>
